<template>
  <div class="login-container">
    <div class="login-bg">
      <div class="law-justice-icon">
        <el-icon size="80"><ScaleToOriginal /></el-icon>
      </div>
      <div class="particles">
        <div v-for="i in 30" :key="i" class="particle" :style="getParticleStyle(i)"></div>
      </div>
      <div class="login-box">
        <div class="form-container" :class="{ 'active': state.activeForm }">
          <transition name="fade" mode="out-in">
            <component 
              :is="state.currentComponent" 
              @switch-form="handleSwitchForm"
              @register-success="handleRegisterSuccess"
            />
          </transition>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import LoginForm from '@/views/login/LoginForm.vue'
import LawyerRegister from '@/views/login/LawyerRegister.vue'
import PublicRegister from '@/views/login/PublicRegister.vue'
import { ScaleToOriginal } from '@element-plus/icons-vue'

// 组件映射
const componentMap = {
  LoginForm,
  LawyerRegister,
  PublicRegister
}

const state = reactive({
  currentComponent: componentMap.LoginForm,
  activeForm: false
})

const handleSwitchForm = (formName) => {
  state.activeForm = true
  setTimeout(() => {
    state.currentComponent = componentMap[formName]
    state.activeForm = false
  }, 300)
}

const handleRegisterSuccess = () => {
  handleSwitchForm('LoginForm')
}

const getParticleStyle = (i) => {
  const size = Math.random() * 5 + 2
  return {
    width: `${size}px`,
    height: `${size}px`,
    left: `${Math.random() * 100}%`,
    top: `${Math.random() * 100}%`,
    opacity: Math.random() * 0.5 + 0.1,
    animationDuration: `${Math.random() * 20 + 10}s`,
    animationDelay: `${Math.random() * 5}s`
  }
}
</script>

<style scoped>
.login-container {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(135deg, #1a2a6c, #b21f1f, #fdbb2d);
  overflow: hidden;
  position: relative;
}

.login-bg {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.law-justice-icon {
  position: absolute;
  top: 30px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.1);
  z-index: 0;
}

.login-box {
  background: rgba(255, 255, 255, 0.9);
  border-radius: 20px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
  width: 400px;
  padding: 40px;
  z-index: 1;
  position: relative;
  overflow: hidden;
}

.login-box::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    to bottom right,
    rgba(255, 255, 255, 0.3) 0%,
    rgba(255, 255, 255, 0) 60%
  );
  transform: rotate(30deg);
  pointer-events: none;
}

.form-container {
  transition: all 0.3s ease;
}

.form-container.active {
  transform: scale(0.95);
  opacity: 0.7;
}

.particles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 0;
}

.particle {
  position: absolute;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  animation: float linear infinite;
}

@keyframes float {
  0% {
    transform: translateY(0) translateX(0);
  }
  50% {
    transform: translateY(-100px) translateX(100px);
  }
  100% {
    transform: translateY(0) translateX(0);
  }
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>